<template>
  <div class="publish-second">
    <x-header>来人呐!<a slot="right"></a></x-header>
    <tab :line-width="1" custom-bar-width="70px">
      <tab-item :selected="i===0" v-for="(item,i) in tabList" :key="i" @on-item-click="handleClickTab">{{item}}</tab-item>
    </tab>
    <group>
      <x-input v-model="form.title" title="标题" :placeholder="form.isBuy?'请输入你要买的宝贝':'请输入你要卖的宝贝'"></x-input>
      <x-input v-model="form.price" type="number" title="价格" placeholder="请输入价格"></x-input>
      <x-textarea v-model="form.content" :max="800" placeholder="宝贝描述"></x-textarea>
      <!-- <uploader
        v-if="!form.isBuy"
        :max="10"
        :images="form.images"
        :handleClick="false"
        :show-header="false"
        :readonly="false"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        @preview="previewMethod($event)">
      </uploader> -->
      <uploadImage v-if="!form.isBuy" :imglist.sync="form.images"></uploadImage>
    </group>
    <group>
      <popup-picker title="分类" :data="list" v-model="form.category" placeholder="请选择分类"></popup-picker>
    </group>
    <x-button class="publish-btn" type="primary" @click.native="doPublish">确定发布</x-button>
    <confirm v-model="showPublishConfirm" title="发帖提示" @on-confirm="publicSecond">
      <p style="text-align:center;">法律风险提示</p>
    </confirm>
     <transition name="bounce">
      <div class="img-enlarge" v-show="imgEnLarge" @click="handleImgEnlarge">
        <img class="img" v-lazy="imgUrl" :src="imgUrl" alt="">
      </div>
    </transition>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
// import Uploader from 'vux-uploader';
import uploadImage from '../../components/UploadImage'
import { upload } from '../../api/'
import {
  XHeader,
  Group,
  XButton,
  PopupPicker,
  Tab,
  TabItem,
  XTextarea,
  XInput,
  Confirm
} from 'vux';
const IndexStore = namespace('publish');
@Component({
  components: {
    XHeader,
    PopupPicker,
    Group,
    uploadImage,
    XButton,
    Tab,
    TabItem,
    XTextarea,
    XInput,
    Confirm
  }
})
export default class PublishSecond extends Vue {
  @IndexStore.Action getCreatePost
  showPublishConfirm = false
  uploadUrl = upload
  imgEnLarge = false
  form = {
    title: '',
    content: '',
    category: [],
    price: '',
    images: [],
    isBuy: false
  }
  tabList = ['我要卖', '我要买']
  list = [['书籍', '手机数码', '家具家电', '服饰鞋包', '二手车', '美妆捡漏', '生活百货', '其他']]
  handleClickTab (index) {
    this.form.isBuy = index === 1
  }
  imgUrl = ''
  previewMethod (e) {
    this.imgUrl = e.url;
    this.imgEnLarge = true;
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
  publicSecond () {
    const { isBuy, title, content, category, price, images } = this.form
    const params = {
      title: title,
      content: `<pre>${content}</pre>`,
      category: '二手',
      secCategory: category,
      type: 4,
      scObj: {
        isBuy,
        price
      },
      imgs: images
    }
    this.getCreatePost(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        localStorage.setItem('type', 4)
        this.$router.push({
          path: '/forum/square',
          query: {
            type: 5
          }
        })
        this.$vux.toast.text('发布成功', 'middle');
      }
    })
  }
  doPublish () {
    let flag = true
    const { title, content, category, price } = this.form
    if (!price) {
      flag = false
      this.$vux.toast.text('请填写价格', 'middle');
    }
    if (category.length === 0) {
      flag = false
      this.$vux.toast.text('请选择分类', 'middle');
    }
    // if (!isBuy && images.length === 0) {
    //   flag = false
    //   this.$vux.toast.text('请上传宝贝图片', 'middle');
    // }
    if (!content) {
      flag = false
      this.$vux.toast.text('请输入宝贝描述', 'middle');
    }
    if (!title) {
      flag = false
      this.$vux.toast.text('请输入宝贝标题', 'middle');
    }
    if (flag) {
      this.showPublishConfirm = true
    }
  }
}
</script>
<style lang="less">
  .publish-second {
    padding-top: 46px;
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
  .img {
      width: 100%;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .publish-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
</style>
